<template>
	<view class="Reconciliation">
		<uni-datetime-picker v-if="query.isShow" @change="changeDate" :clear-icon="false" v-model="range"
			type="daterange" />
		<view class="container">
			<view class="form">
				<view class="cell">
					<view class="label">客 户</view>
					<view class="content">
						{{entity.CustomerName}}
					</view>
				</view>
				<view class="cell">
					<view class="label">电 话</view>
					<view class="content">
						{{entity.CustomerPhone?entity.CustomerPhone:''}}
					</view>
				</view>
				<view class="cell">
					<view class="label">地 址</view>
					<view class="content">
						{{entity.CustomerAddress?entity.CustomerAddress:''}}
					</view>
				</view>
				<view class="cell">
					<view class="label">账 期</view>
					<view class="content">
						{{entity.StartTime}} ~ {{entity.EndTime}}
					</view>
				</view>
				<view class="cell">
					<view class="label">上期余额</view>
					<view class="content cRight">
						{{momenyFormat(entity.Balance)}}
					</view>
				</view>
				<view class="cell">
					<view class="label">本期新欠</view>
					<view class="content cRight">
						{{momenyFormat(entity.Arrears)}}
					</view>
				</view>
				<view class="cell">
					<view class="label">本期还款</view>
					<view class="content cRight">
						{{momenyFormat(entity.Repayment)}}
					</view>
				</view>
				<view class="cell">
					<view class="label">本期余额</view>
					<view class="content cRight">
						{{momenyFormat(entity.Residue)}}
					</view>
				</view>
			</view>
			<view class="table">
				<view class="tr">
					<view class="th td">日期</view>
					<!-- <view class="th td action">类型</view> -->
					<view class="th td">金额</view>
					<view class="th td">欠款余额</view>
					<view class="th td action">操作</view>
				</view>
				<view class="tr" v-if="data.length>0">
					<view class="td"> 初期欠款 </view>
					<view class="td action"> </view>
					<view class="td"> </view>
					<view class="td"> {{momenyFormat(data[0].PreviousOwing)}} </view>
					<view class="td action"> </view>
				</view>
				<view v-for="item in data" :key="item.Id" :class="item.Type==3?'warn tr':'tr'">
					<view class="td">
						{{item.CreateTime.substring(0,10)}}
					</view>
					<!-- <view class="td action">
						{{item.Type==0?'还款':item.Type==1?'赊货':item.Type==2?'现收':'作废 '}}
					</view> -->
					<!-- <view class="td action">
						{{item.Type==0?'还款':item.Type==1?'赊货':'作废'}}
					</view> -->
					<view class="td">
						{{momenyFormat(item.Money)}}
					</view>
					<view class="td">
						{{momenyFormat(item.Owing)}}
					</view>
					<view class="td action">
						<text v-if="item.Type!=0" @click="toWebView(item.BillId,item.billlistId)">详情</text>
					</view>
				</view>
			</view>
		</view>
		<button v-if="saveBtnShow" type="warn" size="mini" class="fixedBtn" @click="del">删除</button>
		<button v-else type="primary" size="mini" class="fixedBtn" @click="save">保存</button>
		<view v-if="entity.Signature"
			style="background-color: #fff;padding: 20rpx;box-sizing: border-box;font-weight: bold;">
			客户签字
		</view>
		<view v-if="entity.Signature" class="imgBox">
			<img class="img" :src="entity.Signature" alt="客户签名">
		</view>
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
			<uni-popup-share @select="selectShare"></uni-popup-share>
		</uni-popup>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" message="成功消息" title="发送对账单" :duration="2000" :before-close="true"
				@close="close" @confirm="confirm" placeholder="请输入客户手机号"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		regPhone
	} from '@/utils/regExp.js'
	import {
		momenyFormat,
		getMonthRange
	} from '@/util/util.js'
	export default {
		data() {
			return {
				entity: {},
				data: [],
				query: {},
				range: [],
				saveBtnShow: true
			}
		},
		onLoad(query) {
			this.query = JSON.parse(query.data)
			console.log(this.query);
			if (this.query.range) this.range = this.query.range
			else this.range = getMonthRange(1)
			// 删除保存
			if (this.query.BillConfirmId) this.saveBtnShow = true
			else this.saveBtnShow = false
			this.getTheData()
		},
		onNavigationBarButtonTap() {
			if (!this.query.BillConfirmId) return this.$api.msg('请保存后再进行分享')
			this.$refs.share.open()
		},
		methods: {
			// 删除
			del() {
				this.$http('post', '/BO/BIllcollection/DeleteConfirmData', [this.query.BillConfirmId]).then(res => {
					if (res.Success) {
						this.$api.msg('操作成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else this.$api.msg(res.Msg)
				})
			},
			// 保存
			save() {
				if (!this.entity.CustomerId) return this.$api.msg('暂无匹配数据,请更改日期尝试')
				this.$http('post', '/BO/BIllcollection/SaveBillConfirmData', this.entity).then(res => {
					if (res.Success) {
						this.$api.msg('保存成功')
						this.query.BillConfirmId = res.Data.Id
						this.saveBtnShow = true
					} else this.$api.msg(res.Msg)
				})
			},
			// 底部弹窗选择  微信分享  短信分享
			selectShare(e) {
				let StartTime = this.entity.StartTime ? this.entity.StartTime.split('/').join('-') : ''
				let endTime = this.entity.EndTime ? this.entity.EndTime.split('/').join('-') : ''
				if (e.item.text == '微信') {
					let obj = {
						"CompanyId": this.query.CompanyId,
						"CustomerId": this.query.CustomerId,
						"StartTime": StartTime,
						"EndTime": endTime,
						"BillConfirmId": this.query.BillConfirmId,
						"Type": uni.getStorageSync('CompanyInfo').SignType,
					}
					let str =
						`CompanyId:${this.query.CompanyId},CustomerId:${this.query.CustomerId},StartTime:${StartTime},EndTime:${endTime},BillConfirmId:${this.query.BillConfirmId},Type:${uni.getStorageSync('CompanyInfo').SignType}`


					console.log(str.split(','))
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 5,
						title: this.entity.CustomerName + '  [' + StartTime + ' ~ ' + endTime +
							"对账单]", // 分享标题
						imageUrl: "https://www.yoojet.com/0108.png", //分享封面图片
						miniProgram: {
							// id: 'gh_87e228dbd289',
							id: 'gh_89ab73bc2bb4',

							// path: 'pages/index/index?data=' + JSON.stringify(obj),
							path: 'pages/Reconciliation/Reconciliation?data=' + str,
							type: '0',
							webUrl: 'http://shq.yoojet.com'
						},
						success: function(res) {
							// 此处是调起微信分享成功的回调
						},
						fail: function(err) {
							// 此处是调起微信分享失败的回调
						}
					});
				} else if (e.item.text == '短信') {
					console.log('获取发送短信参数', this.entity.CustomerPhone, this.entity.CustomerName, this.query.CompanyId, this
						.query.CustomerId, this.query.BillConfirmId, StartTime, endTime, uni.getStorageSync(
							'CompanyInfo').SignType)
					let str =
						`data=CompanyId:${this.query.CompanyId},CustomerId:${this.query.CustomerId},BillConfirmId:${this.query.BillConfirmId},StartTime:${StartTime},EndTime:${endTime},Type:${uni.getStorageSync('CompanyInfo').SignType}`
					console.log('str', str)
					// 如果不存在客户手机号  弹窗填写客户手机号进行发送
					if (!this.entity.CustomerPhone) this.$refs.popup.open()
					// 发送短信
					else this.send(this.entity.CustomerPhone, str, this.entity.CustomerName)
				}
			},
			// 发送短信
			send(phone, str, cName) {
				this.$http('post', '/BO/BIllcollection/SendCollection', [{
					"CollectionPhone": phone,
					"CollectionValue": str,
					"CollectionDW": cName
				}]).then(res => {
					if (res.Success) this.$api.msg('发送成功')
					else this.$api.msg(res.Msg)
				})
			},
			// 催款确认
			confirm(e) {
				let StartTime = this.entity.StartTime ? this.entity.StartTime.split('/').join('-') : ''
				let endTime = this.entity.EndTime ? this.entity.EndTime.split('/').join('-') : ''
				if (!regPhone.test(e)) return this.$api.msg('请输入正确的手机号')
				let str =
					`data=CompanyId:${this.query.CompanyId},CustomerId:${this.query.CustomerId},BillConfirmId:${this.query.BillConfirmId},StartTime:${StartTime},EndTime:${endTime},Type:${uni.getStorageSync('CompanyInfo').SignType}`
				// 请求
				this.send(e, str, this.query.CustomerName)
				this.$refs.popup.close()
			},
			close() {
				this.$refs.popup.close()
			},
			// 获取欠款对账单
			getTheData() {
				this.$http('post', '/BO/BIllcollection/GetReconciliationData', {
					"CompanyId": this.query.CompanyId,
					"CustomerId": this.query.CustomerId,
					"StartTime": this.range[0],
					"EndTime": this.range[1],
					"BillConfirmId": this.query.BillConfirmId || ''
				}).then(res => {
					if (!res.Success) {
						this.$api.msg(res.Msg)
						this.entity = {}
						this.data = []
						return
					}
					this.entity = res.Data
					this.entity.StartTime = this.entity.StartTime.replace('0:00:00', '')
					this.entity.EndTime = this.entity.EndTime.replace('0:00:00', '')
					this.data = res.Data.BIllcollectionList
					console.log('this.entity', this.entity)
				})
			},
			changeDate(e) {
				this.range = e
				this.getTheData()
			},
			momenyFormat(num) {
				num = Number(num)
				if (isNaN(num)) return '0.00'
				return num.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
			},
			// 明细
			// 去小票页面
			toWebView(Id, billId) {
				uni.navigateTo({
					url: '/pages/Arrears/webview?Id=' + Id + '&billId=' + billId
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.warn {
		background-color: #ff9999;
	}

	.fixedBtn {
		position: fixed;
		bottom: 10px;
		right: 10px;
		z-index: 9;
	}

	.Reconciliation {
		padding: 10px;
		padding-bottom: 120rpx;
		color: #000;
		height: 100%;
		background-image: url('/static/background.png');
		background-size: cover;
		box-sizing: border-box;
		overflow-y: scroll;

		.imgBox {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 180px;
			overflow: hidden;
			width: 100%;
			background-color: #fff;

			.img {
				transform: rotate(-90deg);
				width: 160px;
				background-color: #f5f5f5;
			}
		}

		.container {
			width: 100%;
			background-color: #fff;

			.title {
				font-weight: bold;
				text-align: center;
			}

			.form {
				margin: 30rpx 0;
				border-bottom: 1px solid #ccc;
				line-height: 2.5;

				.cell {
					border: 1px solid #ccc;
					border-bottom: none;
					display: flex;

					.label {
						width: 150rpx;
						border-right: 1px solid #ccc;
						padding-right: 20rpx;
						text-align: right;
						background-color: #fafafa;
					}

					.content {
						flex: 1;
						padding: 0 20rpx;
					}

					.cRight {
						text-align: right;
					}
				}
			}

			.table {
				border-bottom: 1px solid #ccc;

				.tr {
					border: 1px solid #ccc;
					border-bottom: none;
					display: flex;
					align-items: center;
					height: 100%;

					.td {
						padding: 10rpx 10rpx;
						height: 100%;
						// border-right: 1px solid #ccc;
						flex: 1;
						text-align: center;
						font-size: 12px;
					}

					.th {
						font-weight: bold;
						line-height: 2;
						font-size: 15px;
					}

					.action {
						flex: inherit;
						width: 70rpx;

						text {
							color: blue;
						}
					}
				}
			}
		}

		.confirm {
			position: fixed;
			right: 30rpx;
			bottom: 60rpx;
		}
	}
</style>